<template>
  <div class="geometry-background">
    <canvas ref="canvasRef"></canvas>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue'

const props = defineProps({
  config: {
    type: Object,
    default: () => ({
      shape: 'squares',
      color: '#667eea',
      animation: 'pulse'
    })
  }
})

const canvasRef = ref(null)
let ctx = null
let shapes = []
let animationId = null
let time = 0

class GeometryShape {
  constructor(canvas, type) {
    this.canvas = canvas
    this.type = type
    this.x = Math.random() * canvas.width
    this.y = Math.random() * canvas.height
    this.size = Math.random() * 40 + 20
    this.rotation = Math.random() * Math.PI * 2
    this.rotationSpeed = (Math.random() - 0.5) * 0.02
    this.pulsePhase = Math.random() * Math.PI * 2
    this.opacity = Math.random() * 0.3 + 0.1
  }

  update(time) {
    if (props.config.animation === 'rotate') {
      this.rotation += this.rotationSpeed
    } else if (props.config.animation === 'float') {
      this.y += Math.sin(time + this.pulsePhase) * 0.5
    }
  }

  draw(context, time) {
    context.save()
    context.translate(this.x, this.y)
    context.rotate(this.rotation)
    
    let size = this.size
    if (props.config.animation === 'pulse') {
      size = this.size * (1 + Math.sin(time + this.pulsePhase) * 0.2)
    }
    
    context.globalAlpha = this.opacity
    context.strokeStyle = props.config.color
    context.lineWidth = 2

    if (this.type === 'squares') {
      context.strokeRect(-size/2, -size/2, size, size)
    } else if (this.type === 'triangles') {
      context.beginPath()
      context.moveTo(0, -size/2)
      context.lineTo(size/2, size/2)
      context.lineTo(-size/2, size/2)
      context.closePath()
      context.stroke()
    } else if (this.type === 'circles') {
      context.beginPath()
      context.arc(0, 0, size/2, 0, Math.PI * 2)
      context.stroke()
    }

    context.restore()
  }
}

const init = () => {
  const canvas = canvasRef.value
  if (!canvas) return

  canvas.width = canvas.offsetWidth
  canvas.height = canvas.offsetHeight
  ctx = canvas.getContext('2d')

  shapes = []
  for (let i = 0; i < 30; i++) {
    shapes.push(new GeometryShape(canvas, props.config.shape))
  }
}

const animate = () => {
  if (!ctx || !canvasRef.value) return

  ctx.fillStyle = 'rgba(255, 255, 255, 0.05)'
  ctx.fillRect(0, 0, canvasRef.value.width, canvasRef.value.height)

  time += 0.05

  shapes.forEach(shape => {
    shape.update(time)
    shape.draw(ctx, time)
  })

  animationId = requestAnimationFrame(animate)
}

const handleResize = () => {
  init()
}

onMounted(() => {
  init()
  animate()
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  if (animationId) {
    cancelAnimationFrame(animationId)
  }
  window.removeEventListener('resize', handleResize)
})

watch(() => props.config, () => {
  init()
  time = 0
}, { deep: true })
</script>

<style scoped>
.geometry-background {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}
</style>

